<template>
    <div class="col card p10">
        <label class="title">蓄热罐加热参数</label>
        <div class="row_center mt">
            <label class="less">加热温度:</label>
            <el-input class="num_input" size="small" v-model="ctx.temp"/>
            <label class="less">℃</label>
        </div>
        <div class="row_center mt">
            <label class="less">超时时间:</label>
            <el-input class="num_input" size="small" v-model="ctx.timeout"/>
            <label class="less">分钟</label>
        </div>
        <div class="row_center mt">
            <el-button @click="onClickQuery" type="warning">查询</el-button>
            <el-button @click="onClickSet" type="primary">设置</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { dialog } from '../../service/ui';
import { set_reserve_heat_info, get_reserve_heat_info } from '../../service/heat_cmd';
import { delay } from '../../service/utils';

interface Ctx {
    temp: string,
    timeout: string,
}

const ctx = reactive<Ctx>({
    temp: '150',
    timeout: '10',
});

async function onClickQuery() {
    try {
        const info = await get_reserve_heat_info();
        ctx.temp = '';
        ctx.timeout = '';
        await delay(50);
        ctx.temp = `${info.temp}`;
        ctx.timeout = `${info.timeout}`;
    } catch (msg) {
        dialog.err(msg);
    }
}

async function onClickSet() {
    if ((ctx.temp.length == 0) ||
        (ctx.timeout.length == 0)) {
        dialog.err('请输入参数');
        return;
    }

    try {
        const temp = parseInt(ctx.temp);
        const timeout = parseInt(ctx.timeout);
        await set_reserve_heat_info(temp, timeout);
        dialog.succ('设置成功');
    } catch (msg) {
        dialog.err(msg);
    }
}

</script>
